import React from "react";
import {withRouter} from 'react-router-dom'
import {Button, Form, Input} from "antd";
import AuthModel from "../../../model/auth";
import Info from "../../../service/info";
import {auth, GlobalContext} from "../../../context";

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
}

const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
}

const errorMapper = {
    400: '用户名或密码不符合规范',
    401: '用户已经存在',
    402: '用户不存在或密码错误',
    800: '密码错误',
}

class Login extends React.Component {
    constructor(props) {
        super(props)
        this.modal = new AuthModel()
        this.state = {
            login: auth.login,
            form: {
                username: '', //用户名 >=4字节 <=12字节
                password: '', //密码     >=6字节 <=12字节
            }
        }
    }

    static contextType = GlobalContext

    onLogin = (values, onLoginSuccess) => {
        this.modal
            .login(values)
            .then(resp => {
                if (resp) {
                    onLoginSuccess({...resp.data, username: values.username})
                    return true
                }
            })
            .then((succ) => {
                if (succ) this.props.history.push('./')
            })
    }


    render() {

        return (
            <GlobalContext.Consumer>
                {(context) => {


                    return <div
                        style={{
                            position: 'absolute',
                            top: '50%',
                            left: '50%',
                            // width: '50vw',
                            height: 'auto',
                            border: '5px solid lightblue',
                            padding: '20px',
                            borderRadius: '10px',
                            transform: 'translate(-50%, -50%)',
                        }}
                    >
                        <Form
                            {...layout}
                            ref={el => this.form = el}
                            initialValues={this.state.form}
                            onFinish={(value) => this.onLogin(value, context.auth.onLoginSuccess)}
                        >
                            <Form.Item
                                label="用户名"
                                name="username"
                                rules={[{ required: true, message: 'Please input your username!' }]}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item
                                label="密码"
                                name="password"
                                rules={[{ required: true, message: 'Please input your password!' }]}
                            >
                                <Input.Password />
                            </Form.Item>

                            <Form.Item {...tailLayout}>
                                <Button type="primary" htmlType="submit">
                                    登录
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>

                }}

            </GlobalContext.Consumer>

        )

    }
}

export default withRouter(Login)
